<template>
  <div>
    <div class="windowInfo windowInfo2">

      <div class="showBox1">
        <div class="tableBox">
          <a-table :columns="columns" :pagination="false" :data-source="data" bordered rowKey="identificationCode"
            size="small" style="width:100%">
            <div slot="title" slot-scope="currentPageData">
              <div class='topInfo' style="display:flex">
                <div style="width:100%;text-align:center;color:#fff;font-size:16px">天线设备状态显示</div>


              </div>
            </div>


            <!-- <span v-else>——</span> -->

          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import '@/assets/less/dashborder.less'
import $ from 'jquery'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        console.log(msg, '-----websocket的数据');
        if (msg.cmd == 'ANTENNA_REFRESH') {
          this.getData()
        }
      },
    },
  },
  data() {
    const columns = [
      {
        title: '信号锁定状态',
        dataIndex: 'SignalLockStatus',
        key: 'SignalLockStatus',
        customRender: function (text) {
          if (text == 1) {
            return '锁定'
          } else if (text == 0) {
            return '未锁定'
          } else {
            return '/'
          }
        },
      },
      {
        title: '经度(°)',
        dataIndex: 'long',
        key: 'long',
      },
      {
        title: '纬度(°)',
        key: 'lat',
        dataIndex: 'lat',
      },
      {
        title: '高度(m)',
        dataIndex: 'height',
        key: 'height',
      },
      {
        title: '信号电平(V)',
        dataIndex: 'signalV',
        key: 'signalV',
      },
      {
        title: '信噪比(dB)',
        dataIndex: 'SNR',
        key: 'SNR',
      },
      {
        title: '当前信号电平最大值(V)',
        dataIndex: 'maxV',
        key: 'maxV',
      },
      {
        title: '接收频率(MHz)',
        dataIndex: 'receivingFrequency',
        key: 'receivingFrequency',
      },

    ]

    const data = [
      {
        SignalLockStatus: '1',

      },

    ]

    return {
      data,
      columns,
      url: {
        getByChannelCodeAndPackageCode: '/device/nmcDeviceGridValue/getByChannelCodeAndPackageCode',//全参数
      }
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getValue(res, label) {
      return res.result.find(i => i.packageGridCode == label).packageGridValue
    },
    getData() {
      let temp = {
        channelCode: '天线',
        packageCode: '141-天线-状态监控数据回报',
      }
      getAction(this.url.getByChannelCodeAndPackageCode, temp).then(res => {
        if (res) {
          let temp = res.result.find(i => i.packageGridCode == '141-状态').packageGridValue.toString().split('')
          let data = parseInt(temp[1], 16).toString(2).padStart(4, 0)
          this.$set(this.data[0], 'signalLockStatus', data[0])
          this.$set(this.data[0], 'long', this.getValue(res, '141-经度'))
          this.$set(this.data[0], 'lat', this.getValue(res, '141-纬度'))
          this.$set(this.data[0], 'height', this.getValue(res, '141-高度'))
          this.$set(this.data[0], 'signalV', this.getValue(res, '141-信号电平'))
          this.$set(this.data[0], 'SNR', this.getValue(res, '141-信噪比'))
          this.$set(this.data[0], 'maxV', this.getValue(res, '141-当前信号电平最大值'))
          this.$set(this.data[0], 'signalV', this.getValue(res, '141-信号电平'))
          this.$set(this.data[0], 'receivingFrequency', this.getValue(res, '141-接收频率'))
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// .showBox1{
.topInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

// }
/* .windowInf */
.titleBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30px;

  .keyBox {
    font-size: 14px;

    color: #fff;
    height: auto;
    display: flex;
    border-radius: 15px;
    padding: 5px;

    div {
      padding: 0 2px;
    }

    .WPZ {
      line-height: 14px;
      margin-right: 5px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .JL {
      line-height: 14px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: rgb(108, 245, 108);
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    // .WJL {
    //   background: rgb(230, 215, 19);
    // }
    // .JL {
    //   background: rgb(80, 226, 60);
    // }
    // .DX {
    //   background: rgb(119, 118, 118);
    // }
  }
}
</style>

<style lang="less" scoped>
.tableBox {
  width: 100%;

  .ant-table-header {
    background: transparent !important;
    font-weight: 500 !important;
  }

  .ant-table .ant-table-thead>tr>th {
    background: transparent !important;
    font-weight: 500 !important;
  }

  h5 {
    margin: 3px;
    padding: 0;
    color: #fff;
  }
}


.windowInfo {
  position: relative;
  min-width: 45px;
  min-height: 45px;

  line-height: 30px;
  text-align: center;
  color: #fff;
  padding: 5px 2px;
  background: rgba(30, 36, 50, 0.6) !important;

  .bodyBox {
    // width: 250px;
    display: flex;

    .body {
      width: 250px;
      margin: -1px;
      border: 1px solid;
    }
  }
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>

<style>
.windowInfo .ant-empty-normal {
  color: #fff;
}

.windowInfo .ant-table .ant-table-row:hover>td {
  /* color: #fff; */
  /* background: #fff !important; */
}

/* .windowInfo2 .ant-select-selection {
  background: transparent;
  color: #fff;
}
.windowInfo2 .ant-select-arrow svg {
  color: #fff;
} */
.err {
  color: red;
}

.gre {
  color: rgb(108, 245, 108);
}

.windowInfo .ant-descriptions-title,
.windowInfo .ant-descriptions-item-label,
.windowInfo .ant-descriptions-item-content {
  color: #fff !important;
}

.tableBox {
  display: flex;

}
</style>
